<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes shake-around {
            0% {
                width: 100px;
                height: 100px;

            }

            17% {
                /* clear: both; */
                margin: 100px 20vw;
                width: 60vw;
                height: 60vw;
                /* height: 100%; */
                /* margin: 100px auto; */

            }
            50% {
                /* margin: 100px 20vw;
                width: 60vw;
                height: 60vw; */

                transform: rotateY(360deg);
            }

            60% {

                transform: rotateY(405deg);
            }

            80% {

                transform: rotateY(315deg);
            }

            90% {
                transform: rotateY(405deg);
            }

            100% {
                transform: rotateY(360deg);
                /* width: 300px;
                height: 300px;
                margin: 100px auto; */
                margin: 100px 20vw;
                width: 60vw;
                height: 60vw;

            }
        }

        body {
            perspective: 980px;
            /* perspective-origin: 10% 600px; */


        }

        .box {
            position: relative;
            width: 100px;
            height: 100px;
            margin-left: 0;
            margin-top: 0;
            /* transition: all 8s; */
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;
            text-align: center;

        }

        .box:hover {
            /* animation: shake-around 10s infinite; */
            /* transform: rotateY(540deg); */
            animation: shake-around 3s forwards infinite ease-in;

        }

        .front,
        .back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            /* font-size: 30px;
            text-align: center;
            line-height: 300px; */
        }

        .front {

            /* background-size: 300px 300px; */

            /* background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.dd87870885ac22f313500f50d970dcee?rik=BaIWm4Gs1%2fNSTg&riu=http%3a%2f%2fpic101.nipic.com%2ffile%2f20160618%2f20928798_134501191002_2.jpg&ehk=WHtnwt9VUZiBskTTq5OsYsCDz7QSZc63EGncDpbnAwg%3d&risl=&pid=ImgRaw&r=0); */
            /* background-image: url(https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=fdcf397a3c4e251fe2a2ecfe97b6e52f/caef76094b36acaf92260dbc70d98d1000e99ca8.jpg); */

            z-index: 1;
            backface-visibility: hidden;
        }

        .back {
            /* background-size: 300px 300px; */
            /* background-color: yellow; */

            /* background-image: url(https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=fdcf397a3c4e251fe2a2ecfe97b6e52f/caef76094b36acaf92260dbc70d98d1000e99ca8.jpg); */
            /* 像手机一样 背靠背 旋转 */
            transform: rotateY(180deg);
            backface-visibility: hidden;

        }

        .round {
            /* box-shadow: 0 0 20px 20px tomato; */
            border-radius: 50%;
            margin-top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">
            <img class = "round"src="https://tse1-mm.cn.bing.net/th/id/R-C.183c6a22c892c2ede7e4e447130c0aa3?rik=G%2b%2fzXrVtUljcrQ&riu=http%3a%2f%2fpic27.nipic.com%2f20130309%2f8569866_221155188315_2.jpg&ehk=OB9ra%2bADuADbQJlQnt%2bdYLncknvmT5b56mZZUcOjSMQ%3d&risl=&pid=ImgRaw&r=0" alt="">
        </div>
        <div class="back">
            <img class = "round"src="https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=fdcf397a3c4e251fe2a2ecfe97b6e52f/caef76094b36acaf92260dbc70d98d1000e99ca8.jpg" alt="">

        </div>
    </div>
</body>

</html>